import {Canvas} from '@react-three/fiber'
import {Experience} from './components/Experience'
import {GameProvider} from './hooks/useGame.jsx'
import {UI} from './components/UI.jsx'

export const DEBUG_MODE = true
export const GREEN_COLS = 4
export const GREEN_COL_SPACE = 2.5
export const GREEN_ROW_SPACE = 4
export const AREA_BOARD_SPEED = 10
export const AREA_BOARD_LENGTH = 55.1

function App() {
  return (
    <GameProvider>
      <Canvas shadows camera={{position: [0, 8, 12], fov: 90}}>
        <color attach="background" args={['#333']}/>
        <fog attach={'fog'} args={['#333', 14, 35]}/>
        <Experience/>
      </Canvas>
      <UI />
    </GameProvider>
  )
}

export default App
